<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-layout-popuptype">
  <em class="ddp-bg-popup"></em>
  <div class="ddp-ui-popup">
    <!-- title -->
    <div class="ddp-ui-popup-title">
      <span class="ddp-txt-title-name">{{'msg.dp.ui.union' | translate}}</span>
      <!-- det -->
    </div>
    <!-- //title -->
    <div class="ddp-ui-popup-contents">
      <div class="ddp-ui-dataset-new ddp-type">
        <!-- sub title -->
        <div class="ddp-ui-sublabel">
          {{'msg.dp.ui.union.choose.ds' | translate}}

          <!-- pop button -->
          <div class="ddp-ui-pop-buttons">
            <a href="javascript:" class="ddp-btn-pop" (click)="close()">
              {{'msg.comm.btn.close' | translate}}
            </a>
            <a href="javascript:" class="ddp-btn-pop ddp-bg-black"
               [ngClass]="{'ddp-disabled': isAddEnabled()}"
               (click)="addDatasets()">
              <em class="ddp-icon-link-plus"></em>
              {{'msg.dp.btn.union.add' | translate}}
            </a>
          </div>
          <!-- //pop button -->

        </div>
        <!-- //sub title -->
        <div class="ddp-type-top-option ddp-clear">
          <!-- 검색 -->
          <div class="ddp-form-search ddp-fleft">
            <em class="ddp-icon-search"></em>
            <input type="text" placeholder="{{'msg.dp.ui.ds.search.description' | translate}}"
                   (keypress)="onKeyPress($event)" [(ngModel)]="searchText">
            <em class="ddp-btn-search-close" *ngIf="searchText" (click)="refreshSearch()"></em>
          </div>
          <!-- //검색 -->

        </div>

        <div class="ddp-wrap-viewtable">
          <!-- 테이블 -->
          <div class="ddp-box-viewtable">
            <!-- gridhead -->
            <div class="ddp-ui-gridhead">
              <table class="ddp-table-form ddp-table-type2">
                <colgroup>
                  <col width="51px">
                  <col width="*">
                  <col width="20%">
                  <col width="20%">
                </colgroup>
                <thead>
                <tr>
                  <th class="ddp-txt-center">
                    <label class="ddp-ui-checkbox" (click)="checkAll();">
                      <input type="checkbox" class="ddp-checkbox-form" [checked]="isAllChecked()" [disabled]="isCheckAllDisabled()">
                      <i class="ddp-icon-checkbox"></i>
                    </label>
                  </th>
                  <th (click)="sortList('dsName')">
                    {{'msg.comm.menu.manage.prep.set' | translate}}
                    <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'dsName' || selectedContentSort.sort === 'default'"></em>
                    <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'dsName' && selectedContentSort.sort === 'asc'"></em>
                    <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'dsName' && selectedContentSort.sort === 'desc'"></em>
                  </th>
                  <th>
                    {{'msg.comm.th.type' | translate}}
                  </th>
                  <th (click)="sortList('modifiedTime')">
                    {{'msg.comm.ui.list.last' | translate}}
                    <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'modifiedTime' || selectedContentSort.sort === 'default'"></em>
                    <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'modifiedTime' && selectedContentSort.sort === 'asc'"></em>
                    <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'modifiedTime' && selectedContentSort.sort === 'desc'"></em>
                  </th>
                </tr>
                </thead>

              </table>
            </div>
            <!--// gridhead -->

            <!-- gridbody -->
            <div class="ddp-ui-gridbody">
              <table class="ddp-table-form ddp-table-type2">
                <colgroup>
                  <col width="51px">
                  <col width="*">
                  <col width="20%">
                  <col width="20%">
                </colgroup>

                <tbody>
                <tr *ngFor="let dsItem of datasets">
                  <td class="ddp-txt-center">
                    <label class="ddp-ui-checkbox" (click)="check(dsItem);">
                      <input type="checkbox" [checked]="dsItem.selected && !dsItem.origin" [disabled]="dsItem.origin">
                      <i class="ddp-icon-checkbox"></i>
                    </label>
                  </td>
                  <td>
                    <div class=" ddp-txt-long" title="{{dsItem.dsName}}" *ngIf="!dsItem.dsDesc; else yesDesc">
                      {{dsItem.dsName}}
                    </div>
                    <ng-template #yesDesc>
                      <div class=" ddp-txt-long" title="{{dsItem.dsName}} - {{dsItem.dsDesc}}">
                        {{dsItem.dsName}}
                        <span class="ddp-txt-colortype">- {{dsItem.dsDesc}}</span>
                      </div>
                    </ng-template>
                  </td>
                  <td>
                    <span *ngIf="dsItem.dsType.toString() === 'IMPORTED'">{{'msg.dp.ui.imported' | translate}}({{dsItem.importType}})</span>
                    <span *ngIf="dsItem.dsType.toString() === 'WRANGLED'">{{'msg.dp.ui.wrangled' | translate}}</span>
                  </td>
                  <td>
                    {{dsItem.modifiedTime | mdate:'YYYY-MM-DD HH:mm'}}
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!--// gridbody -->

          </div>
          <!-- //테이블 -->
          <div class="ddp-ui-bottomoption ddp-clear">
            <span class="ddp-data-type ddp-fleft">
              {{'msg.dp.ui.sel.count'| translate :{value:selectedItems.length} }}
            </span>

          </div>
        </div>


      </div>


    </div>

  </div>
</div>
